<template>
	<view class="outbox">
		<!-- 顶部栏 -->
		<view class="navBar">
			<view class="back">
				<image class="imgIcon" @click="backPro" src="../../static/search/back.svg"></image>
			</view>
			<view class="title">
				搜索
			</view>
			<view></view>
		</view>
		<!-- 搜索框 -->
		<view class="searchInput">
			<view class="searchBtn">
				<image src="../../static/search/searchbtn.svg"></image>
			</view>
			<view class="inputSelect">
				<input placeholder="可输入内容为金额/日期/类型" type="text" v-model="state.searchValue" @input="searchListen">
			</view>
			<view class="clearBtn" v-if="state.searchValue.length>0">
				<image src="../../static/search/clear.svg" @click="closeContent"></image>
			</view>
		</view>
		<!-- 内容栏 -->
		<view class="content">
			<!-- 默认情况占位内容 -->
			<view class="seize" v-if="state.searchValue.length<1">
				<image src="../../static/search/zeize.svg"></image>
				<text style="color: #999;">搜索一下试试吧~</text>
			</view>
			<!-- 搜索情况下 -->
			<view class="searchState" v-if="state.searchValue.length>0">
				<!--有返回信息情况  -->
				<view class="hasback" v-if="state.hasBack == true">
					<view class="allComputed">
						<view class="accItem" v-for="item in state.allCount" :key="item.id"
							:class="item.id==2?'border':''">
							<view class="" style="color: #999;">{{item.name}}</view>
							<view class="" style="font-weight:700;">{{item.id>1?'￥':''}}{{item.num}}</view>
						</view>
					</view>
					<view class="itemBox" v-for="(item,index) in state.accArr" :key="index">
						<view class="itemIcon"><image :src="`../../static/type/${state.typeHash[item.type]}.svg`" mode=""></image></view>
						<view class="itemInfo">
							<view class="bigtype">{{item.bigType}}</view>
							<view class="remark">{{item.remark}}</view>
						</view>
						<view class="itemNum">
							<view class="money">
								{{item.billType==1?'支出':'收入'}}:￥{{item.money}}
							</view>
							<view class="time">
								{{item.time.slice(0,10)}}
							</view>
						</view>
					</view>
				</view>
				<!-- 无返回信息情况 -->
				<view class="noback" v-if="state.hasBack == false">
					<image src="../../static/search/noback.svg"></image>
					<text style="color: #999;">没有找到相关账单喔~</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive
	} from "vue";
	const state = reactive({
		token: '',
		searchValue: '',
		hasBack: false,
		backArray: [],
		userInfo: {},
		accArr: [],
		allCount: [],
		typeHash: {
			"百货": "departmentStore",
			"彩票": "lottery",
			"餐厅消费": "restaurantConsumption",
			"餐饮": "repast",
			"宠物": "pet",
			"服饰": "costume",
			"副食": "non-stapleFood",
			"工资": "salary",
			"工作": "work",
			"还款": "repayment",
			"红包": "redPacket",
			"家庭": "family",
			"交通": "traffic",
			"借出": "lend",
			"借入": "borrow",
			"捐赠": "donate",
			"快递费": "expressFee",
			"礼金": "cashGift",
			"礼品": "present",
			"理财": "moneyManagement",
			"零食": "snacks",
			"旅行": "travel",
			"美容": "Beauty",
			"年终奖": "yearEndBonus",
			"其他": "else",
			"汽车": "automobile",
			"日用": "ofEverydayUse",
			"社交": "socialContact",
			"食堂消费": "CanteenConsumption",
			"收款": "receipt",
			"书籍": "books",
			"蔬菜": "vegetable",
			"数码": "numericalCode",
			"水果": "fruits",
			"通讯": "communication",
			"维修": "maintain",
			"洗漱用品": "toiletry",
			"休闲": "leisure",
			"学习": "study",
			"烟酒": "tobaccoAndWine",
			"医疗": "medical",
			"饮品": "beverage",
			"娱乐": "recreation",
			"住房": "housing",
			"转账": "transferAccounts",
			"追星": "starchaser",
			"租金": "rental"
		}
	})
	onMounted(() => {
		getToken()
	})
	// 获取用户token令牌
	const getToken = () => {
		uni.getStorage({
			key: 'Authorization',
			success: (res) => {
				state.token = res.data
				getUser()
			}
		})
	}
	// 获取用户信息
	const getUser = () => {
		uni.request({
			url: 'http://124.221.162.230:8888/user/getById',
			method: 'POST',
			header: {
				Authorization: state.token
			},
			success: (res) => {
				state.userInfo = res.data.data
			}
		})
	}
	// 回到上一页首页
	const backPro = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	// 搜索内容监听
	const searchListen = (e) => {
		console.log(state.searchValue)
		uni.request({
			url: 'http://124.221.162.230:8888/bill/searchBillByApp',
			method: 'POST',
			header: {
				'Authorization': state.token
			},
			data: {
				id: state.userInfo.id,
				like: state.searchValue,
				page: 1,
				pageSize: 100
			},
			success: (res) => {
				console.log(res)
				if (res.data.code == 200) {
					let accData = res.data.data.data;
					if (accData.length) {
						state.hasBack = true;
						state.accArr = accData;
						let pay = 0;
						let expense = 0;
						for (let i = 0; i < accData.length; i++) {
							if (accData[i].billType == 1) {
								pay = pay + accData[i].money;
							} else {
								expense = expense + accData[i].money;
							}
						}
						state.allCount = [{
								name: '共计',
								id: 1,
								num: accData.length
							},
							{
								name: '相关支出',
								id: 2,
								num: pay
							},
							{
								name: '相关收入',
								id: 3,
								num: expense
							}
						]
					} else {
						state.hasBack = false
					}
				} else {
					state.hasBack = false
				}
			}
		})
	}
	// 清空搜索框数据，并把内容重置为最初始情况
	const closeContent = () => {
		state.searchValue = ''
	}
</script>

<style lang="less" scoped>
	.outbox {
		width: 100vw;
		height: 100vh;
		padding-top: var(--status-bar-height);
		background-color: #79bbff;
		padding-left: 40rpx;
		padding-right: 40rpx;
		box-sizing: border-box;
		overflow: hidden;

		.navBar {
			width: 100%;
			height: 140rpx;
			display: grid;
			grid-template-columns: 1.2fr 5fr 1.2fr;

			.back {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.imgIcon {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
				font-weight: 700;
			}
		}

		.searchInput {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			border-radius: 10rpx;
			display: grid;
			grid-template-columns: 1.2fr 5.2fr 1fr;

			.searchBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.inputSelect {
				display: flex;
				align-items: center;
				justify-content: center;

				input {
					width: 100%;
					height: 100%;
					font-size: 36rpx;
				}
			}

			.clearBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.content {
			margin-top: 40rpx;
			width: 100%;
			height: 76%;
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;

			.seize {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 400rpx;
					height: 400rpx;
				}
			}

			.searchState {
				width: 100%;
				height: 100%;

				.hasback {
					width: 100%;
					height: 100%;
					overflow: hidden;
					overflow-y: scroll;

					.allComputed {
						width: 100%;
						height: 140rpx;
						display: grid;
						grid-template-columns: 1fr 1fr 1fr;

						.accItem {
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							text-align: center;
						}

						.border {
							border-left: 2rpx solid #d3d3d3;
							border-right: 2rpx solid #d3d3d3;
						}
					}

					.itemBox {
						width: 100%;
						height: 140rpx;
						display: grid;
						grid-template-columns: 1fr 2fr 2fr;
						.itemIcon{
							display: flex;
							align-items: center;
							justify-content: center;
							image{
								width: 100rpx;
								height: 100rpx;
							}
						}
						.itemInfo{
							display: flex;
							flex-direction: column;
							justify-content: center;
							.bigtype{
								color: crimson;
								font-weight: 700;
								height: 40rpx;
							}
							.remark{
								height: 40rpx;
								width: 300rpx;
								overflow: hidden;
								white-space: nowrap;
								color: #b8b8b8;
								text-overflow: ellipsis;
							}
						}
						.itemNum{
							color: #b8b8b8;
							display: flex;
							flex-direction: column;
							justify-content: center;
							.money{
								height: 40rpx;
							}
							.time{
								height: 40rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}

				.noback {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 400rpx;
						height: 400rpx;
					}
				}
			}
		}
	}
</style>